<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				margin: 10px;
				border: solid 1px red;
			}
			
			.bgBlue{
				background-color: blue;
			}
			
			
			.bgGreen{
				background-color: green;
			}
			
		</style>
        <script src="js/jquery.min.js"></script>
        <script>

            $(function(){
				
				
				$("#btn1").click(()=>{
					//获取样式    $(".d1").css("border")  
					// console.log('$(".d1").css("border")',$(".d1").css("border"))
					
					//通过name  value 设置样式属性
					// $(".d1").css("border","solid 1px blue");
					// $(".d1").css("width","500px");
					// $(".d1").css("height","500px");
					
					
					 // $(".d1").css({
						// 	"border":"solid 1px blue",
						// 	"width":"300px",
						// 	"height":"300px" } )
						
						
						
						
						$("div").css("background-color",function (index, value){
							console.log("index",index);
							console.log("value",value);
							if(index == 0){
								return "rgb(255,0,0)";
							}else{
								return "rgb(255,255,0)";
							}
						})

					
				})
				
				
				//添加class
				
				$("#btn2").click(()=>{
					
					// document.getElementsByTagName("div")[0].className = document.getElementsByTagName("div")[0].className + " bgGreen"
					
					$(".d1").addClass("bgGreen");
				})
				
				
				
				//删除样式 class
				
				$("#btn3").click(()=>{
					// let oldClass = document.getElementsByTagName("div")[0].className;
					// let oldClassIndex = oldClass.indexOf("bgGreen");
					// //oldClass    oldClassIndex 
					// document.getElementsByTagName("div")[0].className  = oldClass
					
					// document.getElementsByTagName("div")[0].className = document.getElementsByTagName("div")[0].className + " bgGreen"
					
					$(".d1").removeClass("bgGreen");
				})
				
				
				
				//判断样式是否存在 class
				$("#btn4").click(()=>{
					if($(".d1").hasClass("bgBlue")){
						$(".d1").removeClass("bgBlue");
					}else{
						$(".d1").addClass("bgBlue");
					}
					
				})
				
				
				//切换样式 class
				$("#btn5").click(()=>{
					$(".d1").toggleClass("bgBlue")
				})
                
            })






        </script>

    </head>
    <body>
        <button id="btn1">添加Css</button>
        <button id="btn2">添加Class</button>
        <button id="btn3">移除Class</button>
        <button id="btn4">判断是否存在样式</button>
        <button id="btn5">切换样式</button>
		
		<div class="d1  aaa" style="">
			
			
			
		</div>
		
		
		<div class="d2 " style="">
			
			
			
		</div>
		
		
		
		
		
		
		
		
    </body>
</html>
